<template>
  <!-- PDF -->
  <!-- 页面整体采用百分比布局 -->
  <div frameborder="0" scrolling="no" class="PDF-content hidden-div" :style="{ width: pageWidth + 'px' }">
    <div class="print-box PDFShare" :id="'PDFShare' + random" :ref="'PDFShare' + random">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import JsPDF from '/node_modules/jspdf/dist/jspdf.es.js'
import font from './simhei-normal.js'
export default {
  props: {
    conf: {
      type: Object,
      default: () => {
        return {
          lang: 'zh'
        }
      }
    },
    reportTitle: {
      type: String,
      default: '打印Pdf'
    },
    // 导出模板的宽高比
    pageWidth: {
      type: [String, Number],
      default: 850
    },
    pageHeight: {
      type: [String, Number],
      default: 1080 + 40 // 避免多一页空白页
    }
  },
  data() {
    return {
      random: 0
    }
  },
  mounted() {
    this.random = Math.ceil(Math.random() * 10000)
  },
  methods: {
    exportPages() {
      const PDF = new JsPDF({
        // orientation: 'landscape',
        // unit: 'pt',
        // format: [this.pageWidth, this.pageHeight],
        unit: 'px',
        format: [this.pageWidth, this.pageHeight]
      })
      // const source = this.$refs['PDFShare' + this.random]
      const source = document.getElementById('PDFShare' + this.random)
      // 添加并设置字体-解决中文乱码问题-需要测试-还要考虑UI规范
      PDF.addFileToVFS('simhei-normal.ttf', font)
      PDF.addFont('simhei-normal.ttf', 'simhei', 'normal')
      PDF.setFont('simhei')
      PDF.html(source, {
        margin: 0,
        x: 0,
        y: 0,
        fontFaces: [
          {
            family: 'simhei',
            src: [
              {
                url: 'simhei-normal.ttf',
                format: 'truetype'
              }
            ]
          }
        ]
      })
      PDF.autoPrint()
      const title = this.reportTitle + '.pdf'
      PDF.save(title)
    }
  }
}
</script>
<style lang="less" scoped>
.hidden-div {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background-color: transparent;
}
/*  PDFShare 不可少  */
.PDF-content,
.PDFShare {
  font-family: 'simhei' !important;
  /*padding-right: 60px;*/
}
.PDF-content table {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
}
.PDF-content td {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  padding: 5px;
  word-break: break-all;
}
.tr {
  display: table-row;
  height: 100px;
}
.table .td img {
  width: 100px;
  height: 100px;
  display: block;
}
td {
  padding: 5px;
}
.bg {
  background-size: 1123px 794px;
  background-repeat: round;
}
</style>
<style lang="less" scoped>
.fontTextSpecialWeight {
  color: #333333;
  font-weight: normal;
  letter-spacing: 0.5px;
  -webkit-text-fill-color: #333333cc;
  -webkit-text-stroke-color: #333333cc;
  -webkit-text-stroke-width: 1px;
}
.detail-goods {
  ::v-deep {
    .el-dialog {
      background: transparent;
      box-shadow: none;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 24px;
    }
  }
}
.print-box {
}
</style>
